<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>创建网格</title>
</head>
<body onload="init()">
<script src="../three.min.js"></script>
<script>
  /* 参数
   -----------------------------------------------------------------

   new THREE.Mesh(geometry, material)
   THREE.Mesh 基础自 THREE.Object3D
   含 scale、rotation、position 三个属性。它们都是 THREE.Vector3 实例

   -----------------------------------------------------------------
   */

  function init() {
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(400, 300);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x000000)

    let scene = new THREE.Scene();

    let camera = new THREE.PerspectiveCamera(50, 400 / 300, 1, 10)
    camera.position.set(3, 3, 5);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    let light = new THREE.DirectionalLight(0xffffff);
    light.position.set(2, 10, 5);
    scene.add(light);


    var material = new THREE.MeshLambertMaterial({
      color: 0xffff00
    });
    var geometry = new THREE.CubeGeometry(1, 2, 3);
    // 如果不指定material，则每次会随机分配一种wireframe为true的材质
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 除了在构造函数中指定材质，在网格被创建后，也能对材质进行修改：
    mesh.material = new THREE.MeshLambertMaterial({
      color: 0xff0000
    });

    // THREE.Vector3 有 x、y、z 三个属性，如果只设置其中一个属性，则可以用以下方法
    mesh.position.z = -1;

    // 如果需要同时设置多个属性，可以使用以下两种方法：
    // mesh.position = new THREE.Vector3(1.5, -0.5, 0);
    mesh.position.set(1.5, 0.5, 0);

    // 缩放对应的属性是 scale，
    // 旋转对应的属性是 rotation ，具体方法与上例相同，分别表示沿 x、y、z 三轴缩放或旋转。
    mesh.rotation.z = .5


    renderer.render(scene, camera);
  }
</script>
</body>
</html>